<template>
  <div class="app-container" v-loading="pageLoading">
    <!-- <el-button type="primary" class="fr" @click="createItem">创建</el-button> -->
    <div class="filter-container">
      <el-select class="filter-item" style="width: 140px" @change="research" v-model="query.queryString.warehouse_id"
        placeholder="选择仓库" clearable>
        <el-option v-for="i in warehouseList" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 260px" placeholder="输入条码查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.sn"></el-input>
      <el-input style="width: 260px" placeholder="输入物料查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.material"></el-input>
      <el-input style="width: 160px" placeholder="输入供应商查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.vendor"></el-input>
      <el-input style="width: 200px" placeholder="批次号YYYYMMDD" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString.lot_date_code">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key === 'forbidden'">
          <span v-if="v.row.forbidden == 1" class="text-label bg-red">已禁用</span>
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-green" @click.prevent="goDetail(v.row, v.$index)">批次异动明细&nbsp;</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'snDetail',
  mixins: [commonMixin],
  data: function () {
    return {
      api: this.$api.wInventory + 'inventorysn/',
      name: '库存批次明细',
      columns: [
        { title: '仓库代码', key: 'warehouse_code', width: 100 },
        { title: '仓库名称', key: 'warehouse_name', width: 100 },
        { title: '条码', key: 'sn', width: 240 },
        { title: '料号', key: 'key_part_no', width: 120 },
        { title: '物料名称', key: 'key_part_name', width: 160 },
        { title: '供应商代码', key: 'vendor_code', width: 100 },
        { title: '供应商名称', key: 'vendor_name', width: 180 },
        { title: '批次号', key: 'lot_date_code', width: 100 },
        { title: '库存数量', key: 'qty', width: 100 },
        { title: '单位', key: 'unit_name', width: 70 },
        { title: '是否禁用', key: 'forbidden', width: 80 },
      ],
      fields: [],
      query: {
        queryString: {},
        page: 1,
        size: 10,
      },
      tableProps: {
        border: true,
        opsColWith: 100,
        hideOperations: false,
      },
      warehouseList: [],
    }
  },
  methods: {
    goDetail(v) {
      this.$store.dispatch('delView', { name: 'wInventoryLog' }).then((r) => {
        this.$router
          .push({
            name: 'wInventoryLog',
            params: {
              warehouse_id: v.warehouse_id,
              material: v.key_part_no,
              lot_date_code: v.lot_date_code,
              vendor: v.vendor_code,
              sn: v.sn,
            },
          })
          .catch(() => {})
      })
    },
    fetchParams() {
      this.query.queryString = Object.assign({}, this.query.queryString, this.$route.params)
      this.getList()
    },
  },
  created: function () {
    this.fetchParams()
    //this.getList()
    this.$request(this.$api.warehouse + 'getlist', {
      page: 1,
    })
      .then((r) => {
        this.warehouseList = this.arrayOptions(r.list, 'id', ['warehouse_code', 'warehouse_name'])
      })
      .catch(() => {})
  },
}
</script>
<style scoped>
</style>
